<template>
	<view class="storeBox" ref="storeBox">
		<view class="top">
			<view class="ys-search-input">
				<u-input type="text" placeholder="请输入菜品名称" v-model="tradeName" confirm-type="search"
					@confirm="getGoodList"></u-input>
				<image src="https://www.yongshantuan.cn/images/yongshan/search.png" mode=""></image>
			</view>
		</view>
		<!-- 二期需求 -->
		<view class="tabsContent">
			<u-tabs :list="companyList" name="companyShortName" :is-scroll="false" :current="current" @change="tabsChange"
				font-size="30" :bold="false" active-color="#f5914f" :active-item-style="{
					color: '#f5914f',
					fontSize: '34rpx'
				}"></u-tabs>
		</view>
		<!-- 二期需求 -->
		<view class="commenMenu" v-if="current === 0">
			<view :class="{ check: checkMenuIndex == index }" v-for="(item, index) in menuList" :key="index"
				@click="changeMenuIndex(index)">
				<view class="">{{ item.title }}</view>
				<view class="">({{ item.storeNum }})</view>
			</view>
		</view>
		<image class="addStore" @click="addGood" src="https://www.yongshantuan.cn/images/yongshan/platformSide/new.png"
			mode=""></image>
		<view class="storeBig">
			<view class="storeList" v-for="(item, index) in goodList" :key="item.id">
				<!-- <view class="name">
					<image :src="item.logo|getImg" mode="">
					</image>
					{{item.storeName}}
				</view> -->
				<view class="info" v-if="current === 0">
					<image :src="item.productPicture | getImg" mode=""></image>
					<view class="">
						<view class="">{{ item.tradeName }}</view>
						<view class="">
							<view>已售: {{ item.soldCount }}份</view>
							<view>限购: {{ item.limitBuy == '-1' ? '不限' : item.limitBuy + '份' }}</view>
						</view>
						<view class="">排序: {{ item.sort ? item.sort : '无' }}</view>
						<view class="">¥{{ item.commodityPrice ? item.commodityPrice : item.commodityPriceCache }}
						</view>
					</view>
					<view class="">
						<view class="" :class="{ check: item.upFlag == '上架中' }" @click="showModal('up', index)">上架
						</view>
						<view class="" :class="{ check: item.upFlag == '下架中' }" @click="showModal('down', index)">下架
						</view>
					</view>
				</view>
				<goods-item :item="item" v-else></goods-item>
				<view class="control">
					<view class="" @click="showEdit(item)">
						<image src="https://www.yongshantuan.cn/images/yongshan/platformSide/edit.png" mode=""></image>
						编辑
					</view>
					<view class="" @click="copyInfo(item)">
						<image src="https://www.yongshantuan.cn/images/yongshan/platformSide/copy.png" mode=""></image>
						复制
					</view>
					<view class="" @click="moveInfo(item)">
						<image src="https://www.yongshantuan.cn/images/yongshan/platformSide/copy.png" mode=""></image>
						移动复制
					</view>
					<view class="" @click="showModal('del', index)">
						<image src="https://www.yongshantuan.cn/images/yongshan/del.png" mode=""></image>
						删除
					</view>
				</view>
			</view>
		</view>
		<CommenFooter :checkIndex="1"></CommenFooter>
		<AddGood ref="addGood" :show="showAddGood" :type="showType" :editInfo="editInfo" @hideBox="hideBox"
			@showToast="showToast"></AddGood>
		<AddGoodWithCompany ref="addGoodWithCompany" :companyId="companyId" @hideBox="hideBox" @showToast="showToast">
		</AddGoodWithCompany>

		<u-modal v-model="modalShow" :show-cancel-button="true" :content="content" @confirm="confirm"></u-modal>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import {
	deteleGoodWithCompany,
	getGoodList,
	editGood,
	deteleGood,
	getFoodStateTotal,
	getCompanyList,
	getGoodListWithCompany
} from '@/utils/req/api.js';
import CommenFooter from '@/components/footer/footer.vue';
import AddGood from '../components/addGood/addGood.vue';
import AddGoodWithCompany from '../components/company/addGood.vue';
import GoodsItem from '../components/company/goosItem.vue';
import mixinShareApp from '@/components/mixinShareApp/mixinShareApp.js';
import {
	mapActions,
	mapState,
	mapGetters,
	mapMutations
} from 'vuex';

export default {
	components: {
		CommenFooter,
		AddGood,
		AddGoodWithCompany,
		GoodsItem
	},
	mixins: [mixinShareApp],
	data() {
		return {
			selectVisiable: false,
			checkStoreInfo: '',

			checkMenuIndex: 0,
			menuList: [
				// {
				// 	title: '全部商品',
				// 	storeNum: '0'
				// },
				{
					title: '上架中',
					storeNum: '0'
				},
				{
					title: '下架中',
					storeNum: '0'
				},
				{
					title: '限购',
					storeNum: '0'
				}
			],
			goodList: [],
			showAddGood: false, //是否展示新增商品弹窗
			showType: '', //是新增还是编辑
			editInfo: '', //若是编辑则记录对应商品信息
			modalShow: false, //是否展示modal提示框
			modalType: '', //modal的种类
			content: '',
			deleteIndex: '', //点击删除订单列表对应的index
			upIndex: '', //点击上架商品时对应的id
			downIndex: '', //点击下架商品时对应的id

			tradeName: '', //搜索参数
			pageNo: 1,
			pageSize: 10,
			moreGoodFlag: false,
			stateTotalInfo: '',
			upFlag: null,
			limitBuy: null,

			//二期需求
			topMenuList: [{
				name: '全部商品'
			}],
			current: 0,
			showAddGoodWithCompany: false, //是否为企业端展示新增商品弹窗
			companyId: '',
			from: '',
			requestFlag: false
			//二期需求
		};
	},

	// 分享到微信
	onShareAppMessage: function () {
		return this.shareApp();
	},

	// 分享到朋友圈
	onShareTimeline() {
		return this.shareApp();
	},
	onShow() {
		if (this.current === 0) {
			this.getGoodList();
		} else {
			this._getGoodListWithCompany();
		}
		this.getFoodStateTotal();

		this._getCompanyList('food');
	},
	computed: {
		...mapState('commonModule', ['companyList'])
	},
	methods: {
		...mapActions('commonModule', ['_getCompanyList']),
		showToast(message, type) {
			this.$showToast.call(this, message, type);
		},
		async getFoodStateTotal() {
			let res = await getFoodStateTotal();
			this.stateTotalInfo = res.data.result;
			// this.menuList[0].storeNum = res.data.result.allCount;
			// this.menuList[1].storeNum = res.data.result.yesCount;
			// this.menuList[2].storeNum = res.data.result.noCount;
			// this.menuList[3].storeNum = res.data.result.limitCount;

			// 二期需求
			// this.topMenuList[0].name = `全部商品(${res.data.result.allCount})`;
			this.menuList[0].storeNum = res.data.result.yesCount;
			this.menuList[1].storeNum = res.data.result.noCount;
			this.menuList[2].storeNum = res.data.result.limitCount;
			// 二期需求
		},
		//获取商品列表
		async getGoodList(type) {
			if (this.requestFlag == true) {
				this.$showToast('数据正在加载中，请稍等...');
				return;
			}
			this.requestFlag = true;
			let res = await getGoodList({
				pageSize: this.pageSize * this.pageNo,
				pageNo: 1,
				tradeName: this.tradeName,
				upFlag: this.upFlag || '',
				limitBuy: this.limitBuy || ''
			});
			this.requestFlag = false;
			this.goodList = [];
			this.goodList = res.data.result.records;
		},
		showSelect() {
			this.selectVisiable = true;
		},
		selectThis(item) {
			this.checkStoreInfo = item;
			this.selectVisiable = false;
		},
		changeMenuIndex(index) {
			this.checkMenuIndex = index;
			switch (index) {
				// case 0:
				// 	this.upFlag = '';
				// 	this.limitBuy = null;
				// 	break;
				case 0:
					this.upFlag = 'YES';
					this.limitBuy = null;
					break;
				case 1:
					this.upFlag = 'NO';
					this.limitBuy = null;
					break;
				case 2:
					this.upFlag = null;
					this.limitBuy = '1';
					break;
			}
			this.getGoodList();
		},
		addGood() {
			if (this.current === 0) {
				this.showAddGood = true;
			} else {
				this.$nextTick(() => {
					this.$refs.addGoodWithCompany.showAlert('add');
				});
			}
			this.showType = 'add';
		},
		hideBox(type) {
			if (this.current === 0) {
				this.showAddGood = false;
				this.getGoodList();
			} else {
				this._getGoodListWithCompany();
			}
		},
		//展示编辑商品弹窗并预设值
		showEdit(value) {
			if (this.current === 0) {
				this.showAddGood = true;
			} else {
				this.$nextTick(() => {
					this.$refs.addGoodWithCompany.showAlert('edit', value, this.current === 0 ? 'personal' :
						'company');
				});
			}
			this.editInfo = value;
			this.showType = 'edit';
			console.log('编辑');
		},
		copyInfo(value) {
			if (this.current === 0) {
				this.showAddGood = true;
			} else {
				this.$nextTick(() => {
					this.$refs.addGoodWithCompany.showAlert('copy', value, this.current === 0 ? 'personal' :
						'company');
				});
			}
			this.editInfo = value;
			this.showType = 'copy';
			console.log('复制');
		},
		moveInfo(value) {
			// this.editInfo = value;
			this.$nextTick(() => {
				this.$refs.addGoodWithCompany.showAlert('move', value, this.current === 0 ? 'personal' :
					'company');
			});
		},
		//展示modal弹窗
		showModal(type, index) {
			if (type == 'del') {
				this.deleteIndex = index;
				this.modalType = 'delete';
				this.content = '是否要删除这个商品';
			} else if (type == 'up') {
				if (this.goodList[index].upFlag == '上架中') {
					return;
				}
				this.upIndex = index;
				this.modalType = 'up';
				this.content = '是否要上架这个商品';
			} else if (type == 'down') {
				if (this.goodList[index].upFlag == '下架中') {
					return;
				}
				this.downIndex = index;
				this.modalType = 'down';
				this.content = '是否要下架这个商品';
			}
			this.modalShow = true;
		},
		async changeGoodState(type, state) {
			let obj = JSON.parse(JSON.stringify(this.goodList[type == 'up' ? this.upIndex : this.downIndex]));
			obj.upFlag = type == 'up' ? '上架中' : '下架中';

			let res = await editGood(obj);
			if (res.data.success) {
				this.getGoodList();
				this.getFoodStateTotal();
				this.showToast(type == 'up' ? '上架成功' : '下架成功', 'success');
			} else {
				this.showToast(res.data.message, 'warning');
			}
		},
		async deteleGood() {
			let params = {
				id: this.goodList[this.deleteIndex].id
			};
			let res = this.current === 0 ? await deteleGood(params) : await deteleGoodWithCompany(params);
			if (res.data.success) {
				if (this.current === 0) {
					this.getGoodList();
				} else {
					this._getGoodListWithCompany();
				}
				this.getFoodStateTotal();
				this.showToast('删除商品成功', 'success');
			} else {
				this.showToast(res.data.message, 'warning');
			}
		},
		//共用确认函数
		async confirm() {
			this.modalShow = false;
			if (this.modalType == 'up') {
				this.changeGoodState('up', '上架中');
			} else if (this.modalType == 'down') {
				this.changeGoodState('down', '下架中');
			} else if (this.modalType == 'delete') {
				this.deteleGood();
			}
		},
		//二期需求
		tabsChange(e) {
			console.log('e', e);
			if (this.requestFlag == true) {
				this.$showToast('数据正在加载中，请稍等...', 'warning');
				return;
			}
			this.current = e;
			this.goodList = [];
			if (e === 0) {
				this.getGoodList();
			} else {
				this.companyId = this.companyList[this.current].id;
				uni.setStorageSync('companyId', this.companyList[this.current].id);
				this._getGoodListWithCompany();
			}
		},
		//获取商户对应公司的菜品库
		async _getGoodListWithCompany() {
			this.requestFlag = true;
			let res = await getGoodListWithCompany({
				companyId: uni.getStorageSync('companyId'),
				merchantId: uni.getStorageSync('myInfo').id,
				// pageSize:this.pageSize,
				// pageNo:this.pageNo
			});
			this.requestFlag = false;
			console.log('6666res', res);
			this.goodList = [];
			this.goodList = res.data.result;
		}
		//二期需求
	},
	onReachBottom() {
		if (!this.moreGoodFlag) {
			if (this.goodList.length != 0 && this.goodList.length % this.pageSize == 0) {
				this.pageNo = this.pageNo + 1;
				this.moreGoodFlag = true;
				if (this.current === 0) {
					this.getGoodList();
					setTimeout(() => {
						this.moreGoodFlag = false;
					}, 1000);
				}
				// else {
				// 	this._getGoodListWithCompany();
				// }
			}
		}
	},
	watch: {
		current(newVal) {
			console.log('我被改变了', newVal);
		}
	}
};
</script>

<style lang="scss" scoped>
.tabsContent {
	padding: 10rpx 20rpx;
	background-color: #fff;
	border-bottom: 1px solid #eee;

	/deep/.u-tabs {
		.u-tab-item {
			margin-left: 30rpx !important;

			&:nth-child(1) {
				margin-left: 0 !important;
			}
		}
	}
}

.storeBox {
	background-color: #f5f5f5;
	padding-bottom: 200rpx;
	min-height: 100vh;
}

.top {
	padding: 20rpx;
	@include flexs(space-between, center);
	background-color: #fff;

	>view {
		flex: 1;
		// margin-left: 20rpx;
		border-radius: 50rpx;
		border: 1px solid #f5f5f5;
		position: relative;
		overflow: hidden;

		image {
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			left: 10rpx;
			top: 13rpx;
		}

		/deep/.u-input__input {
			padding-left: 40px;
			background-color: #f5f5f5;
		}

		/deep/.u-input__right-icon {
			line-height: 36px;
			min-height: auto !important;
			font-size: 28rpx;
			height: 60rpx;
		}
	}
}

.commenMenu {
	@include flexs();
	padding: 20rpx;
	background-color: #fff;
	font-size: 30rpx;

	>view {
		// width: 25%;
		width: calc(100% / 3);
		flex-direction: column;
		@include flexs(center, center);
		transform: all 0.5s;

		&:active {
			transform: scale(1.05);
		}

		>view {
			font-size: 32rpx;

			&:nth-child(2) {
				font-size: 24rpx;
				line-height: 2;
			}
		}
	}

	margin-bottom: 40rpx;

	.check {
		color: #fa690a;
		font-weight: bold;
	}
}

.storeBig {
	.storeList {
		background-color: #fff;
		padding: 30rpx 20rpx;
		margin-bottom: 20rpx;

		.name {
			@include flexs();

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}
		}

		.info {
			margin: 20rpx 0;
			@include flexs();

			image {
				width: 160rpx;
				height: 160rpx;
				margin-right: 40rpx;
				border-radius: 10rpx;
			}

			>view:nth-child(2) {
				height: 160rpx;
				@include flexs(space-between, flex-start);
				flex-direction: column;
				flex: 1;
				line-height: 1;
				width: calc(100% - 450rpx);
				margin-right: 20rpx;

				>view:nth-child(1) {
					width: 100%;
					font-size: 32rpx;
					font-weight: bold;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}

				>view:nth-child(2) {
					font-size: 28rpx;
					@include flexs();
					color: rgba(0, 0, 0, 0.55);

					>view:nth-child(1) {
						margin-right: 20rpx;
					}
				}

				>view:nth-child(3) {
					font-size: 28rpx;
					color: rgba(0, 0, 0, 0.55);

					// color: red;
					// font-weight: bold;
				}
			}

			view:nth-child(3) {
				width: 160rpx;

				>view {
					border: 1px solid #eee;
					font-size: 28rpx;
					line-height: 2;
					border-radius: 50rpx;
					text-align: center;
					margin: 20rpx 0;
				}

				>.check {
					color: #fa690a;
					border: 1px solid #fa690a;
				}
			}
		}

		.control {
			@include flexs();
			border-top: 1px solid #eee;
			padding: 20rpx 0;

			>view {
				width: calc(100% / 4);
				font-size: 28rpx;
				@include flexs(center, center);
				color: rgba(0, 0, 0, 0.55);

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 20rpx;
				}
			}
		}
	}
}

.addStore {
	width: 150rpx;
	height: 150rpx;
	border-radius: 50%;
	position: fixed;
	right: 0;
	bottom: 10vh;
}

.selectContent {
	padding: 40rpx;

	.title {
		font-size: 32rpx;
		line-height: 2;
		font-weight: bold;
		text-align: center;
		margin-bottom: 30rpx;
	}

	.selList {
		font-size: 28rpx;
		line-height: 2;
		border-bottom: 1px solid #eee;

		&:last-child {
			border: 0;
		}
	}
}
</style>
<style lang="scss">
//组件中引入uview需要在外部页面撰写样式，在组件内部不生效

//添加商品组件的部分样式
.addGoodBox {
	/deep/.u-drawer-right {
		width: 85% !important;
	}
}

/* .ys-search-input .u-input__content input{
		padding-left: 28px;
	} */
</style>